<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
  </el-breadcrumb>

  <div id="box1" style="height: 600px"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, onBeforeUnmount } from "vue";

let myChart: any;

// 在渲染结束以后才可以获取到dom节点
onMounted(() => {
  // 先请求数据
  // then里面写下面的内容

  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("box1"));
  // 绘制图表
  myChart.setOption({
    // color: ["#f00", "#0f0", "#00f", "#ff0"],
    title: {
      text: "收款方式占比:",
      left: "left",
      textStyle: {
        fontSize: 20,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      top: "10%",
      left: "center",
      itemGap: 70,
      itemWidth: 25,
      itemHeight: 25,
      itemStyle: {
        borderWidth: 2,
      },
      // backgroundColor: "red",
      // borderRadius: 50
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "vip card" },
          { value: 735, name: "微信" },
          { value: 1580, name: "支付宝" },
          { value: 484, name: "现金" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 用于监听屏幕尺寸的变化
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});

// 销毁echarts实例
onBeforeUnmount(() => {
  myChart.dispose();
});
</script>
